// 用户登录页面
<template>
  <div class="container">
    <div class="box">
      <div class="content">
        <h2>登录我的小铺</h2>
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="用户名：">
            <el-input v-model="form.username" placeholder="请输入内容" prefix-icon="el-icon-user"> </el-input>
          </el-form-item>
          <el-form-item label="密码：">
            <el-input v-model="form.password" placeholder="请输入内容" prefix-icon="el-icon-lock" show-password> </el-input>
          </el-form-item>
        </el-form>
        <button @click="submit">登录</button>
      </div>
    </div>
  </div>
</template>

<script>
import { login } from '@/api/index.js'
export default {
  data() {
    return {
      form: {
        username: '',
        password: ''
      }
    }
  },
  methods: {
    submit() {
      if (this.form.username.trim() === '') {
        return this.open('请输入用户名')
      }
      if (this.form.password.trim() === '') {
        return this.open('请输入密码')
      }
      const params = {
        username: this.form.username,
        password: this.form.password
      }
      this.verify('/api/home/login', params)
    },
    open(msg) {
      this.$message(`${msg}`)
    },
    async verify(url, params) {
      const { data } = await login(url, params)
      if (data.message === '用户名或密码错误') {
        this.open(data.message)
      } else {
        this.open(data.message)
      }
    }
  }
}
</script>
<style lang="less" scoped src="@/assets/css/login.less"></style>
<style lang="less" scoped>
// @import url('');
</style>
